<template>
    <Teleport to="body">
        <Dialog :app-dialog="appDialog">
            <el-scrollbar max-height="600px" style="padding-right: 20px">
                <el-form ref="formRef" class="form_link" :model="form" :rules="rules" label-width="100px">
                    <!-- 标题 -->
                    <el-form-item label="链接标题" prop="link_title">
                        <el-input
                            v-model="form.link_title"
                            maxlength="20"
                            show-word-limit
                            placeholder="请输入链接标题"></el-input>
                    </el-form-item>
                    <!-- 链接地址 -->
                    <el-form-item label="链接地址" prop="link_url">
                        <el-input v-model="form.link_url" type="text" placeholder="请输入链接地址"></el-input>
                    </el-form-item>
                    <!-- 连接描述 -->
                    <el-form-item label="链接描述" prop="link_desc">
                        <el-input
                            v-model="form.link_desc"
                            type="textarea"
                            :rows="2"
                            maxlength="30"
                            show-word-limit
                            placeholder="请输入链接描述"></el-input>
                    </el-form-item>
                    <ZWUpload ref="emptyData" :cover="'link_share_image'" @submit="getFileList" />
                </el-form>
            </el-scrollbar>
        </Dialog>
    </Teleport>
</template>
<script setup lang="ts">
import Dialog from '@/components/Dialog.vue';
import { reactive, defineEmits, defineExpose, ref, watch } from 'vue';
import ZWUpload from './components/ZWUpload.vue';
import { getSetionId } from '@/utils/utils';
import { quickLink } from '@/api/concreation';
import { ElForm } from 'element-plus';
import { validateHttp } from '@/utils/validate';

const emptyData = ref(null);
const formRef = ref<InstanceType<typeof ElForm>>();
const emit = defineEmits(['getLocalLink']);
// 分组ID
const groupId = ref(0);
const form = reactive({
    group_id: groupId.value,
    id: 0,
    link_title: '',
    link_url: '',
    link_desc: '',
    link_share_image: '',
    code: '',
    check: false
});
const rules = reactive({
    link_title: [
        {
            required: true,
            message: '链接标题不能为空',
            trigger: 'blur'
        }
    ],
    link_url: [
        {
            required: true,
            message: '链接地址不能为空',
            trigger: 'blur'
        },
        { validator: validateHttp, trigger: 'blur' }
    ],
    link_desc: [
        {
            required: true,
            message: '链接描述不能为空',
            trigger: 'blur'
        }
    ],
    link_share_image: [
        {
            required: true,
            message: '链接封面不能为空',
            trigger: 'change'
        }
    ]
});
const showDialog = () => {
    appDialog.visible = true;
};
const cancelHandel = () => {
    appDialog.visible = false;
    formRef.value.resetFields();
    form.link_title = '';
    form.link_url = '';
    form.link_desc = '';
    form.link_share_image = '';
    form.code = '';
    emptyData.value.uploadFileList = [];
};
const submitHandel = () => {
    formRef.value.validate(async (valid: any) => {
        if (valid) {
            const data = [
                {
                    type: 3,
                    id: '6',
                    is_local: true,
                    title: form.link_title,
                    content: form.link_desc,
                    cover_image_url: form.link_share_image,
                    code: form.code,
                    link_url: form.link_url,
                    link_desc: form.link_desc
                }
            ];
            try {
                emit('getLocalLink', data);
                cancelHandel();
            } catch (e) {}
        }
    });
};

const appDialog = reactive({
    visible: false,
    title: '创建链接',
    width: '670px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存'
});
// 获取上传成功的文件
const getFileList = (data: any) => {
    form.link_share_image = getSetionId('url', data)[0];
    form.code = getSetionId('code', data)[0];
};

watch(
    () => form.link_share_image,
    () => {
        formRef.value.validateField('link_share_image');
    }
);
defineExpose({
    showDialog,
    groupId
});
</script>
<style lang="scss" scoped>
.el-form.form_link {
    margin: 10px;

    .el-form-item {
        margin-bottom: 18px !important;
    }
}

.radio_list {
    &_item {
        &_icon {
            width: 14px;
            height: 14px;
            margin: -3px 0 0 6px;

            img {
                margin-top: 2px;
                width: 100%;
                height: 100%;
                vertical-align: top;
            }
        }
    }

    :deep .el-radio__label {
        display: flex;
        align-items: center;
    }
}

.ml2 {
    margin-left: 2px;
}

.mr10 {
    margin-right: 10px;
}

.agree_ment {
    display: flex;
    align-items: center;
}

:deep .el-scrollbar {
    height: 50%;
}
</style>
